<template>
  <el-table :data="studentData.students" style="width: max-content">
    <el-table-column label="头像" width="100">
      <!-- :src 图片的位置信息 -->
      <template slot-scope="scope">
        <el-avatar shape="square" :size="50" :src="'http://localhost:3000/img/' + (scope.row.imagesName || 'defaultImg.jpg')" fit='cover'></el-avatar>
      </template>  
    </el-table-column>

    <el-table-column prop="name" label="姓名" width="fit-content"> </el-table-column>

    <el-table-column prop="age" label="年龄" width="100"> </el-table-column>

    <el-table-column prop="gender" label="性别" width="100"> </el-table-column>

    <el-table-column prop="classId.name" label="班级" width="100">
    </el-table-column>

    <el-table-column label="负责教师" width="100">
      <template slot-scope="scope" >
        <template v-for='item in scope.row.classId.teachers'>
          <el-tag :key="item._id">{{item.name}}</el-tag>
        </template>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="150">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from "axios";
import api from "@/http/api/apis.js";

import { createNamespacedHelpers } from "vuex";
const { mapState: stuMapState, mapActions: stuMapActions } =
  createNamespacedHelpers("student");

export default {
  mounted() {
    this.getStudent();
  },
  data() {
    return {
      imageUrl: "http://localhost:3000/img/",
    };
  },
  computed: {
    ...stuMapState(["studentData"]),
  },
  methods: {
    //调用vuex中的 actions
    ...stuMapActions(["getStudent"]),

    //修改学生路由跳转
    handleEdit(index, row) {
      this.$router.push("/stuSystem/updateStu/" + row._id);
    },
    //删除学生
    async handleDelete(index, row) {
      const _id = row._id;
      const { data } = await api.studentApi.deleteStu({ _id });

      if (data.status) {
        //刷新页面，重新获取学生信息
        this.getStudent();
        //elementui的提示信息
        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success",
        });
      } else {
        //elementui的提示信息
        this.$message({
          showClose: true,
          message: "删除失败",
          type: "error",
        });
      }
    },
  },
};
</script>

<style scoped>
.el-table {
  margin: 10px auto;
}
</style>